<template>
    <div class="page-container" v-loading="loading">
        <div class="page-filter-option mb-3">
            <el-form :inline="true" :model="filterOption" class="flex flex-wrap">
                <el-form-item>
                    <el-input :placeholder="$t('game.setting.domain.name')" suffix-icon="el-icon-search"
                              v-model="filterOption.keyword" @change="filterChange" clearable>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="filterChange">{{ $t('action.search') }}</el-button>
                </el-form-item>
                <el-form-item class="ml-auto mr-0">
                    <el-button type="primary" plain icon="el-icon-plus" @click="dialogItemCreate">{{ $t('action.new') }}</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="page-summary mb-3">
            <el-form :inline="true" label-width="auto" class="detail">
                <el-form-item :label="$t('game.setting.domain.config.transferProxy')" class="mr-10">
                    <div v-for="item in domain.transferProxy">{{ item }}</div>
                </el-form-item>
                <el-form-item :label="$t('game.setting.domain.config.cdnGateAddress')" class="mr-10">
                    <div v-for="item in domain.cdnGateAddress">{{ item }}</div>
                </el-form-item>
                <el-form-item :label="$t('game.setting.domain.config.cdnClientDomain')" class="mr-10">
                    <div v-for="item in domain.cdnClientDomain">{{ item }}</div>
                </el-form-item>
                <el-form-item :label="$t('game.setting.domain.config.cdnGameAddress.title')">
                    <div v-for="item in domain.cdnGameAddress">{{ item.protocol }}://{{ item.domain }}:{{ item.port }}</div>
                </el-form-item>
            </el-form>
        </div>
        <div class="page-container-inner-fluid flex-auto flex flex-col">
            <component-page-content-resize v-slot="{ content }">
                <el-table style="width: 100%" :height="content.height"
                          :data="dataList"
                          :default-sort="{prop: filterOption.order_column, order: filterOption.order_key}"
                          @sort-change="filterOrderChange"
                          highlight-current-row>
                    <el-table-column min-width="150" :label="$t('game.setting.domain.name')" prop="name">
                        <template slot-scope="scope">
                            <div v-html="$options.filters.hsFilterKeyword(scope.row.name, filterOption.keyword)"></div>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="300" :label="$t('game.setting.domain.config.title')" prop="config">
                        <template slot-scope="scope">
                            <el-form label-width="auto" class="detail no-spacing">
                                <el-form-item :label="$t('game.setting.domain.config.transferProxy')">
                                    <div v-for="item in scope.row.config.transferProxy">{{ item }}</div>
                                </el-form-item>
                                <el-form-item :label="$t('game.setting.domain.config.cdnGateAddress')">
                                    <div v-for="item in scope.row.config.cdnGateAddress">{{ item }}</div>
                                </el-form-item>
                                <el-form-item :label="$t('game.setting.domain.config.cdnClientDomain')">
                                    <div v-for="item in scope.row.config.cdnClientDomain">{{ item }}</div>
                                </el-form-item>
                                <el-form-item :label="$t('game.setting.domain.config.cdnGameAddress.title')">
                                    <div v-for="item in scope.row.config.cdnGameAddress">{{ item.protocol }}://{{ item.domain }}:{{ item.port }}</div>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="220" :label="$t('game.setting.domain.updated')" prop="updated" sortable="custom" :sort-orders="['descending', 'ascending']">
                        <template slot-scope="scope">
                            <component-page-timestamp :timestamp="scope.row.updated"></component-page-timestamp>
                        </template>
                    </el-table-column>
                    <el-table-column width="120" :label="$t('game.setting.domain.operation')" align="right" fixed="right">
                        <template slot-scope="scope">
                            <span class="operation-options-icon">
                               <i class="el-icon-upload2" @click="dialogItemConfig(scope)"></i>
                            </span>
                            <span class="operation-options-icon">
                                <i class="el-icon-view" @click="drawerItemDetails(scope)"></i>
                            </span>
                            <span class="operation-options-icon">
                                <i class="el-icon-edit-outline" @click="dialogItemUpdate(scope)"></i>
                            </span>
                            <span class="operation-options-icon">
                               <i class="el-icon-delete" @click="dialogItemDestroy(scope)"></i>
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
            </component-page-content-resize>
            <div class="text-right p-4">
                <el-pagination background layout="total, sizes, prev, pager, next, jumper"
                               :current-page="filterOption.page"
                               :page-size.sync="filterOption.page_size"
                               :total="dataMeta.total"
                               @size-change="filterChange"
                               @current-change="filterPageChange">
                </el-pagination>
            </div>
        </div>
        <el-dialog :title="$t('game.setting.domain.dialog.destroy')" center width="340px" :visible.sync="dialog.visible.destroy">
            <div class="text-center" v-html="$t('confirm.domain', { status: $t('action.delete') })"></div>
            <div class="text-center text-danger-custom">{{ $t('confirm.delete') }}</div>
            <div slot="footer">
                <el-button type="danger" @click="destroy">{{ $t('action.confirm') }}</el-button>
                <el-button @click="dialog.visible.destroy = false">{{ $t('action.cancel') }}</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="$t('game.setting.domain.dialog.config')" center width="320px" :visible.sync="dialog.visible.config">
            <div class="text-center" v-html="$t('confirm.domain', { status: $t('action.select') })"></div>
            <div slot="footer">
                <el-button type="danger" @click="updateConfig">{{ $t('action.confirm') }}</el-button>
                <el-button @click="dialog.visible.config = false">{{ $t('action.cancel') }}</el-button>
            </div>
        </el-dialog>
        <item-details :visible.sync="drawer.visible.details" :data="itemCache"></item-details>
        <item-update-or-create :visible.sync="dialog.visible.updateOrCreate" :data="itemCache" @create="filterChange"></item-update-or-create>
    </div>
</template>

<script>
import ItemDetails from './ItemDetails.vue'
import ItemUpdateOrCreate from './ItemUpdateOrCreate.vue'

export default {
    components: {
        ItemDetails,
        ItemUpdateOrCreate,
    },
    data() {
        return {
            loading: false,
            domain: {
                transferProxy: [],
                cdnGateAddress: [],
                cdnClientDomain: [],
                cdnGameAddress: [],
            },
            filterOption: {
                keyword: '',
                keyword_column: 'name',
                page: 1,
                page_size: 30,
                order: 'desc',
                order_key: 'descending',
                order_column: 'updated',
            },
            dataMeta: {
                total: 0,
            },
            dataList: [],
            itemCache: {},
            dialog: {
                visible: {
                    destroy: false,
                    updateOrCreate: false,
                    config: false,
                }
            },
            drawer: {
                visible: {
                    details: false,
                }
            }
        }
    },
    created() {
        // 初始化数据
        this.filterChange();
    },
    methods: {
        clearFilterOption() {
            this.loading = true;
            this.filterOption.page = 1;
        },
        filterChange() {
            this.clearFilterOption();
            this.getDataList();
        },
        filterPageChange(page) {
            this.loading = true;
            this.filterOption.page = page;
            this.getDataList();
        },
        filterOrderChange(scope) {
            this.clearFilterOption();
            this.filterOption.order = scope.order == 'ascending' ? 'asc' : 'desc';
            this.filterOption.order_key = scope.order;
            this.filterOption.order_column = scope.prop;
            this.getDataList();
        },
        getDataList() {
            axios.get('/game/setting/domain/getList', {
                params: this.filterOption
            }).then((response) => {
                if (response.data.resp_msg.code == 200) {
                    this.dataMeta = response.data.resp_data.meta;
                    this.dataList = response.data.resp_data.data;
                    this.domain = response.data.resp_data.domain;
                } else {
                    this.$message({
                        type: 'error',
                        message: response.data.resp_msg.message,
                        showClose: true
                    });
                }
                this.loading = false;
            })
        },
        // 删除数据
        destroy() {
            // 关闭提示框
            this.dialog.visible.destroy = false;
            // loading 状态 start
            let loading = this.$loading();
            // 保存数据
            axios.post('/game/setting/domain/destroy', {
                id: this.itemCache.id
            }).then((response) => {
                // loading 状态 close
                loading.close();
                // 逻辑处理
                if (response.data.resp_msg.code == 200) {
                    this.$message({
                        type: 'success',
                        message: this.$t('messages.succeeded', {status: this.$t('action.delete')}),
                        showClose: true
                    });
                    // 刷新列表
                    this.filterChange();
                } else {
                    this.$message({
                        type: 'error',
                        dangerouslyUseHTMLString: true,
                        message: this.$t('messages.failed', {status: this.$t('action.delete')}) + `<div class="mt-2">${response.data.resp_msg.message}</div>`,
                        showClose: true
                    });
                }
            })
        },
        // 显示模态框（新增）
        dialogItemCreate() {
            // 缓存数据
            this.itemCache = {};
            // 显示模态框
            this.dialog.visible.updateOrCreate = true;
        },
        // 显示模态框（编辑）
        dialogItemUpdate(scope) {
            // 缓存数据
            this.itemCache = scope.row;
            // 显示模态框
            this.dialog.visible.updateOrCreate = true;
        },
        // 显示模态框（删除）
        dialogItemDestroy(scope) {
            // 缓存数据
            this.itemCache = scope.row;
            // 显示模态框
            this.dialog.visible.destroy = true;
        },
        // 打开抽屉（详情）
        drawerItemDetails(scope) {
            // 缓存数据
            this.itemCache = scope.row;
            // 显示抽屉
            this.drawer.visible.details = true;
        },
        // 显示模态框（配置）
        dialogItemConfig(scope) {
            // 缓存数据
            this.itemCache = scope.row;
            // 显示模态框
            this.dialog.visible.config = true;
        },
        // 更新当前使用域名
        updateConfig() {
            // 关闭提示框
            this.dialog.visible.config = false;
            // loading 状态 start
            let loading = this.$loading();
            // 保存数据
            axios.post('/game/setting/domain/updateConfig', {
                id: this.itemCache.id
            }).then((response) => {
                // loading 状态 close
                loading.close();
                // 逻辑处理
                if (response.data.resp_msg.code == 200) {
                    this.$message({
                        type: 'success',
                        message: this.$t('messages.succeeded', {status: this.$t('action.select')}),
                        showClose: true
                    });
                    // 更新显示数据
                    this.domain = response.data.resp_data;
                } else {
                    this.$message({
                        type: 'error',
                        dangerouslyUseHTMLString: true,
                        message: this.$t('messages.failed', {status: this.$t('action.select')}) + `<div class="mt-2">${response.data.resp_msg.message}</div>`,
                        showClose: true
                    });
                }
            })
        },
    }
}
</script>

<style lang="scss">

</style>
